<template>
  <div class="skill">
    <line-title :title="data.label" />
    <div class="progress">
      <div v-for="(item, index) in data.list" :key="index" class="progress-list">
        <div class="skill-name">
          <font-style :text="item.name" />
        </div>
        <div class="progress-show">
          <line-progress
            striped
            :percent="item.exp"
            :color="item.color"
            striped-active
          ></line-progress>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import LineTitle from '@comp/LineTitle/LineTitle.vue'
  import LineProgress from '@comp/LineProgress/LineProgress.vue'
  import FontStyle from '@comp/FontStyle/FontStyle1.vue'
  // import dataType from './type'
  withDefaults(
    defineProps<{
      data: any
    }>(),
    { data: () => {} }
  )
</script>
<style lang="scss" scoped>
  .skill {
    .progress {
      padding: $about-padding;

      .progress-list {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;

        .skill-name {
          height: 100%;
          width: 29%;
          font-weight: 600;
          font-size: 15px;
          color: #00a67c;
        }

        .progress-show {
          height: 100%;
          flex: 1;
        }
      }
    }
  }
</style>
